<template>
  <view class="page-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <uni-icons type="back" size="20" color="#00C48C" @click="onBack"></uni-icons>
      <text class="nav-title">社区药房</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-wrapper">
      <uni-icons type="search" size="20" color="#00C48C"></uni-icons>
      <input
        type="text"
        class="search-input"
        placeholder="输入药名/条码/公司搜索药品"
        v-model="searchValue"
      />
    </view>

    <!-- 药品列表 -->
    <view class="drug-grid">
      <view
        class="drug-item"
        v-for="(item, index) in drugList"
        :key="index"
        @click="handleItemClick(index)"
      >
        <image class="drug-img" :src="item.image" mode="widthFix"></image>
        <view class="drug-name">{{ item.name }}</view>
        <view class="drug-meta">
          <text class="drug-spec">规格：{{ item.spec }}</text>
          <text class="drug-price">¥{{ item.price }}</text>
        </view>
      </view>
    </view>

    <!-- 底部弹出层（下单面板） -->
    <view 
      class="popup-mask" 
      v-if="showPopup" 
      @click="onMaskClick" 
      @touchmove.stop.prevent
    >
      <view class="popup-content" @click.stop>
        <!-- 药品信息区 -->
        <view class="popup-drug">
          <image 
            class="popup-drug-img" 
            :src="drugList[currentIndex].image" 
            v-if="currentIndex !== -1"
          ></image>
          <view class="popup-drug-info" v-if="currentIndex !== -1">
            <text class="popup-drug-price">¥{{ drugList[currentIndex].price }}</text>
            <text class="popup-drug-stock">库存 {{ drugList[currentIndex].stock }} 件</text>
            <view class="quantity-box">
              <button class="quantity-btn" @click="handleMinus">-</button>
              <text class="quantity-text">{{ quantities[currentIndex] }}</text>
              <button class="quantity-btn" @click="handlePlus">+</button>
            </view>
          </view>
        </view>

        <!-- 收货信息区 -->
        <view class="popup-section delivery-section">
          <view class="section-indicator"></view>
          <view class="delivery-info" @click="editDelivery">
            <view>
              <text class="delivery-name">
                {{ deliveryInfo.name }} {{ deliveryInfo.phone }}
              </text>
              <text class="delivery-address">
                {{ deliveryInfo.address }}
              </text>
            </view>
            <uni-icons type="right" size="16" color="#00C48C"></uni-icons>
          </view>
        </view>

        <!-- 合计与提交区 -->
        <view class="popup-footer">
          <view class="total">
            <text>合计: </text>
            <text class="total-price">¥{{ totalPrice }}</text>
          </view>
          <button class="submit-btn" @click="submitOrder">提交订单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 药品数据结构
interface DrugItem {
  image: string;
  name: string;     // 示例：阿司匹林肠溶片
  spec: string;     // 示例：100mg×60片
  price: number;
  showQuantity: boolean;
  stock: number;    // 库存
}

// 模拟药品数据（严格对齐设计图）
const drugList: DrugItem[] = [
  {
    image: '/static/阿莫西林.png', // 替换为实际图片路径
    name: '阿司匹林肠溶片',
    spec: '100mg×60片',
    price: 10,
    showQuantity: true,
    stock: 24,
  },
  {
    image: '/static/阿莫西林.png',
    name: '板蓝根',
    spec: '100mg×60片',
    price: 10,
    showQuantity: true,
    stock: 45,
  },
  {
    image: '/static/阿莫西林.png',
    name: '金银花颗粒',
    spec: '100mg×60片',
    price: 10,
    showQuantity: true,
    stock: 227,
  },
  {
    image: '/static/阿莫西林.png',
    name: '葡萄糖浆',
    spec: '100mg×60片',
    price: 10,
    showQuantity: true,
    stock: 227,
  },
];

// 响应式变量
const showPopup = ref(false);      // 弹出层默认关闭
const currentIndex = ref(-1);     // 当前选中药品索引
const quantities = ref<number[]>(drugList.map(() => 0)); // 数量控制
const searchValue = ref('');      // 搜索框内容

// 收货信息（严格对齐设计图）
const deliveryInfo = ref({
  name: '姓名',
  phone: '19188888888',
  address: 'xxxx省 xxx 市 xx 区 xxx街道 xxx 号',
});

// 合计价格（计算属性）
const totalPrice = computed(() => {
  if (currentIndex.value === -1) return 0;
  return drugList[currentIndex.value].price * quantities.value[currentIndex.value];
});

// 交互逻辑
// 1. 点击药品项（触发弹出层）
const handleItemClick = (index: number) => {
  const item = drugList[index];
  if (item.showQuantity) {
    // 至少购买1件
    if (quantities.value[index] === 0) {
      quantities.value[index] = 1;
    }
    showPopup.value = true;
    currentIndex.value = index;
  }
};

// 2. 数量增加（校验库存）
const handlePlus = () => {
  if (currentIndex.value === -1) return;
  const stock = drugList[currentIndex.value].stock;
  if (quantities.value[currentIndex.value] < stock) {
    quantities.value[currentIndex.value]++;
  }
};

// 3. 数量减少
const handleMinus = () => {
  if (currentIndex.value === -1) return;
  if (quantities.value[currentIndex.value] > 0) {
    quantities.value[currentIndex.value]--;
  }
};

// 4. 点击遮罩关闭弹出层（背景区域点击有效）
const onMaskClick = () => {
  showPopup.value = false;
  console.log('点击遮罩');
};

// 5. 编辑收货信息（示例）
const editDelivery = () => {
  console.log('编辑收货信息');
};

// 6. 提交订单（示例）
const submitOrder = () => {
  if (currentIndex.value === -1) return;
  console.log('提交订单：', {
    drug: drugList[currentIndex.value],
    quantity: quantities.value[currentIndex.value],
    delivery: deliveryInfo.value,
  });
  // showPopup.value = false;
};

// 7. 返回上一页
const onBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
/* 页面容器 */
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 100rpx;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.nav-title {
  margin-left: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #00C48C;
}

/* 搜索框 */
.search-wrapper {
  display: flex;
  align-items: center;
  margin: 12px 16px;
  padding: 0 12px;
  height: 36px;
  background-color: #fff;
  border: 1px solid #00C48C;
  border-radius: 18px;
}
.search-input {
  flex: 1;
  height: 100%;
  margin-left: 8px;
  font-size: 14px;
}

/* 药品列表 */
.drug-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px;
}
.drug-item {
  width: calc(50% - 85rpx);
  margin: 8px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #00C48C;
  border-radius: 8px;
  text-align: left;
}
.drug-img {
  width: 100%;
  margin-bottom: 8px;
}
.drug-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}
.drug-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drug-spec {
  font-size: 12px;
  color: #999;
}
.drug-price {
  font-size: 14px;
  color: #FF5722;
  font-weight: bold;
}

/* 底部弹出层 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 999;
}

/* 弹出层内容（从底部滑入） */
.popup-content {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* 药品信息区 */
.popup-drug {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.popup-drug-img {
  width: 120px; /* 设计图中药品图尺寸 */
  height: 120px;
  margin-right: 16px;
}
.popup-drug-info {
  flex: 1;
}
.popup-drug-price {
  font-size: 20px;
  color: #FF5722;
  font-weight: bold;
}
.popup-drug-stock {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

/* 数量控制 */
.quantity-box {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.quantity-btn {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #00C48C;
  border-radius: 8px;
  color: #00C48C;
  background-color: #fff;
  font-size: 18px;
  padding: 0;
}
.quantity-text {
  width: 48px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin: 0 12px;
  border: 1px solid #00C48C;
  border-radius: 8px;
  font-size: 16px;
}

/* 收货信息区（绿色竖线标识） */
.popup-section {
  padding: 16px;
}
.delivery-section {
  padding: 16px 24px;
  display: flex;
  align-items: center;
}
.section-indicator {
  width: 4px;
  height: 32px;
  background-color: #00C48C;
  border-radius: 2px;
  margin-right: 12px;
}
.delivery-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.delivery-name {
  font-size: 16px;
  color: #333;
  display: block;
}
.delivery-address {
  font-size: 14px;
  color: #999;
  margin-top: 4px;
  display: block;
}

/* 合计与提交区 */
.popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  border-top: 1px solid #eee;
}
.total {
  font-size: 16px;
  color: #333;
}
.total-price {
  font-size: 20px;
  color: #FF5722;
  font-weight: bold;
}
.submit-btn {
  background-color: #FF3131;
  color: #fff;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 16px;
}
.submit-btn::after {
  border: none; /* 清除uni-app默认按钮边框 */
}
</style>